<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<meta name="renderer" content="webkit" />
<title>sdEditor富文本编辑器 - 轻量级web富文本编辑器 - 移动端富文本编辑器 - 可视化Html网页编辑器</title>
<meta name="keywords" content="sdEditor,富文本编辑器,开源html编辑器,可视化html编辑器,移动端富文本编辑器">
<meta name="description" content="sdEditor是一款基于Jquery开发的轻量化、所见即所得的web富文本编辑器，体积小、安全性高、同时支持一个页面多次调用，支持移动端自适应使用。有效过滤XSS攻击，不破坏Html结构。">
<link rel="stylesheet" href="public/css/ui.css">
<link rel="stylesheet" href="public/css/style.css">
<script src="public/js/jquery.js"></script>
<script src="editor/editor.js"></script>
</head>

<body>
	    
	<h1>sdEditor富文本编辑器</h1>
    <div class="ui-demo">
        <div class="ui-tabs ui-tabs-white" data-href="1">
            <ul class="ui-tabs-nav">
                <li><a href="./">调用方式</a></li>
                <li><a href="./param.html">可选参数</a></li>
                <li class="active"><a href="./mode.html">模式演示</a></li>
                <li><a href="./toolbar.html">自定义工具条</a></li>
                <li><a href="./btn.html">自定义按钮</a></li>
                <li><a href="./upload.html">上传演示</a></li>
                <li><a href="./api.html">接口交互</a></li>
            </ul>
            <div class="ui-tabs-content">
                <div class="ui-tabs-pane active">
                     <!---->
                     <div class="ui-menu ui-menu-blue ui-mb-30"><div class="ui-menu-name">全工具栏</div></div>
                     <div class="ui-editor" id="content" data-toolbar="full"><pre>默认就是全工具栏模式，无需任何参数。</pre></div>
                     
                     <div class="ui-menu ui-menu-blue ui-mt-30 ui-mb-30"><div class="ui-menu-name">后台工具栏</div></div>
                     <div class="ui-editor" id="content2" data-toolbar="admin"><h3>调用方式：</h3>
<pre class="lang-javascript">$("#content").editor({toolbar:'admin'});</pre></div>
                     
                     <div class="ui-menu ui-menu-blue ui-mt-30 ui-mb-30"><div class="ui-menu-name">迷你工具栏</div></div>
                     <div class="ui-editor" id="content3" data-toolbar="mini"><h3>调用方式：</h3>
<pre class="lang-javascript">$("#content").editor({toolbar:'mini'});</pre></div>
                     <!---->
                </div>
            </div>
        </div>
    </div>
    
    <script>
	$(function()
	{
		/*遍历调用*/
		$(".ui-editor").each(function()
		{
			var toolbar=$(this).data("toolbar");
			var id=$(this).attr("id");
			$("#"+id).editor({toolbar:toolbar});
		});
		
		/*也可以使用这种方式简单调用，如下：*/
		/*
		$("#content").editor();
		$("#content2").editor({toolbar:'admin'});
		$("#content3").editor({toolbar:'mini'});
		*/
		
	})
	</script>

</body>
</html>